<!-- Background.vue -->
<template>
  <div class="background big-screen">
    <img :src="backgroundImage" :alt="altText" />
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref } from "vue";

// 使用 defineProps 定义组件的 props
const props = defineProps({
  backgroundImage: {
    type: String,
    default: "src/assets/static/images/53bg.png" // 默认背景图片路径
  }
});

// 为 alt 属性定义一个响应式的 ref 或 const，提供图片的描述
const altText = ref("Default Background");
</script>

<style scoped lang="scss">
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -1; /* 确保背景在最底层 */
}

.background img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片覆盖整个背景容器 */
  pointer-events: none; /* 防止图片覆盖物阻挡点击事件 */
}
</style>
